<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="JZH">
    <script src="js/jquery-3.1.1.js"></script>
    <title></title>
<style>
    body{
      margin: 0; 
      box-sizing: border-box;
    }
    section ul{
        width: 500px;
        height: 40px;
        list-style: none;
        margin: 20px auto;
        background-color: deepskyblue;
        position: relative;
        overflow: hidden;
    }
    section>ul>li:hover{
        color: orange;
        text-decoration: underline
    }
    section>ul>li{
        float: left;
        margin: 20px;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
    } 
     section>ul>li>p{
        text-align: center;
        
    }
    div ul{
        top: 0;
        padding: 10px;
        font-size: 15px;
        font-weight: bold;
        color: gray;
        list-style: none;
        display: none;
        margin: 0 auto;
         }
     div>ul>li{
         padding: 10px 0;
     }    
    div>ul>li:hover{
        text-decoration: underline;
        margin-top:10px; 
        }
     div>ul:nth-child(1){
         text-align: center;
         width: 80px;
         margin-left: 700px;
         margin-top: 0px;
         border: 1px solid gray;
         border-top: none;
     }  
     div>ul:nth-child(2){
         text-align: center;
         width: 80px;
         top: 60px;
         margin-left: 850px;
         border: 1px solid gray;
         border-top: none;
     }   
     div>ul:nth-child(3){
         text-align: center;
         width: 80px;
         top: 60px;
         margin-left: 950px;
         border: 1px solid gray;
         border-top: none;
     }   
     div>ul:nth-child(4){
         text-align: center;
         width: 80px;
         top: 60px;
         margin-left: 1050px;
         border: 1px solid gray;
         border-top: none;
     }         
</style>
</head>
<body>
   <section>
       <ul class="nav">
           <li>公司简介</li>
           <li>产品介绍</li>
           <li>联系我们</li>
           <li>人才招聘</li>
       </ul>
   </section>
   <div>
       <ul>
           <li>概况介绍</li>
           <li>发展历史</li>
           <li>公司实力</li>
       </ul>
       <ul>
           <li>教育研发</li>
           <li>软件教育</li>
           <li>天使投资</li>
       </ul>
       <ul>
           <li>公司地址</li>
           <li>联系方式</li>
           <li>投资加盟</li>
       </ul>
       <ul>
           <li>iOS招聘</li>
           <li>HTML5招聘</li>
           <li>PHP招聘</li>
       </ul>
   </div> 
</body>
<html>
<script>
    //获取section下的li标签
var lis = document.querySelectorAll('section ul li');
    var uls = document.querySelectorAll('div ul');
for(var i =0;i<lis.length;i++){
        lis[i].index=i;
        lis[i].onmouseenter = function(){
             for(var i = 0;i<uls.length;i++){
               uls[i].style.display = 'none';  
             }
              uls[this.index].style.display = 'block';
            }
        lis[i].onmouseout = function(){
            for(var i = 0;i<uls.length;i++){
                uls[i].style.display = 'none';
            }
             uls[this.index].style.display = 'block';
        }
    } 
</script>